<template>
    <div class="user-info">
        <a-dropdown :trigger="['click']">
            <a class="ant-dropdown-link" @click.prevent :placement ="dropdownPlacement">
                <a-avatar :src="userPrincipal.avatar"/>
                {{ userPrincipal.nickName }}
                <DownOutlined/>
            </a>
            <template #overlay>
                <a-menu>
                    <a-menu-item key="1">
                        <a href="http://www.taobao.com/">用户信息</a>
                    </a-menu-item>
                    <a-menu-divider/>
                    <a-menu-item key="0">
                        <a href="http://www.alipay.com/">退出登陆</a>
                    </a-menu-item>
                </a-menu>
            </template>
        </a-dropdown>
    </div>
</template>

<script setup lang="ts">

import LoginStore from "@/store/login/login-store";
import {ref} from "vue";

const dropdownPlacement = ref<string>("bottom");

const store = LoginStore();
const userPrincipal = store.userInfo;
</script>

<style scoped lang="less">

</style>
